// src/layout/components/Header/index.jsx
import { useNavigate } from 'react-router-dom';
import './styles.css';

export default function Header() {
  const navigate = useNavigate();
  
  const handleLogout = () => {
    localStorage.removeItem('token');
    navigate('/login');
  };

  return (
    <header className="admin-header">
      <div className="header-left">
        <h1 className="logo">后台管理系统</h1>
      </div>
      
      <div className="header-right">
        {localStorage.getItem('token') && (
          <div className="user-actions">
            <span className="user-name">管理员</span>
            <button className="logout-button" onClick={handleLogout}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                <polyline points="16 17 21 12 16 7"></polyline>
                <line x1="21" y1="12" x2="9" y2="12"></line>
              </svg>
              退出登录
            </button>
          </div>
        )}
      </div>
    </header>
  );
}